<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="text">
    <div id="box"></div>
    <script>
        //防抖  debounce    [dɪ'baʊns]
        //什么是防抖？
        //防止抖动，在事件被触发的n秒后再执行回调，如果在n秒内又被触发，则重新计时
        //例子：坐电梯--开门--关门

        //应用场景：
        //1、给按钮添加防抖函数，阻止表单多次提交
        //2、对于如输入框连续输入进行Ajax验证的时候，可以减少请求次数
        //3、滚动页面，不想让滚动函数连续触发

        //需求：输入框中输入的内容显示在id为box的盒子中
        //1、如果一直输入，则box盒子中不会显示内容
        //2、停止输入3秒中在让它显示到box盒子中
        //3、如果停止输入3秒之内，又重新输入，则box盒子依然不会显示内容

        function debounce(callback, delay) {
            var obj;
            var timer = null;
            var fn = function() {
                callback.apply(obj)
            }
            return function() {
                //事件中的this---》指向事件源
                obj = this
                    // console.log(obj); //<input type="text" id="text">
                if (timer) {
                    clearTimeout(timer)
                }
                // console.log(fn);
                timer = setTimeout(fn, delay)
            }
        }
        var oText = document.getElementById("text");
        var oBox = document.getElementById("box");
        oText.addEventListener("input", debounce(function() {
            oBox.innerHTML = oText.value
        }, 3000), false)

        //节流  throttle   [ˈθrɒtl]
        //规定一个单位时间，在这个单位时间内，只能执行一次触发事件的回调，如果在单位时间内触发多次，也只执行一次

        //应用场景
        // 1、DOM元素的拖拽
        // 2、Canvas绘图
        // 3、游戏中的刷新率
    </script>
</body>

</html>